import { Headers } from './Header/Header';
import Routes from '../components/Routes';
import { useEffect } from 'react';
import Footers from './Footer/Footer';
import { researchStore } from '../stores/ResearchStore';
import '../scss/index.scss';
import { userStore } from '../stores/UserStore';
import eventBus from '../utils/eventBus';
import { BackTop } from 'antd';
import { registerGlobalFuncs } from '../utils/globalFuncs';

import StatisticStore from '../stores/StatisticStore';

interface IndexProps {
  routes: any;
}

function Index(props: IndexProps) {
  const { routes } = props;
  useEffect(() => {
    registerGlobalFuncs();
    userStore.init();
    StatisticStore.getWatchSymbolist();
    researchStore.getLatest();
    researchStore.getCategory();
    eventBus.addListener('logout', () => {
      userStore.logout();
    })
  }, []);
  return (
    <div className="page-wrapper">
      <Headers />
      <div className="content">
        <Routes routes={routes} />
      </div>
      <Footers />
      <BackTop />
    </div>
  );
}

export default Index;
